
<h2>Visualization/Templating in inputEx</h2>

<br />

<h3>Introduction</h3>

<p>The use of a template engine in inputEx first appeared for the Autocompleter, InPlaceEdit and Uneditable fields.<br />
	 It has also proven very useful in projects that use inputEx.</p>


<p>The library itself doesn't include a template engine, but provides a standard way to use different engines and define your templates within field configurations. It is also very simple to add interfaces to other template engines.</p>


<h3>Rendering</h3>

<p>The fields should use the <strong>inputEx.renderVisu</strong> method to use templates:</p>

<div style="margin-left: 20px;">
	<hr />
		<h4><a name="method_renderVisu">renderVisu</a></h4>
	
		<div class="detail">
			<code><i>static</i>&nbsp;<i>&lt;HTMLElement || String&gt;</i>&nbsp;<b>renderVisu</b>(visuOptions,data,parentEl)</code> 
		</div>

		
		<div class="description">
			
			Render 'data' using a visualization function described by 'visuOptions'
		</div>
		
	<!-- METHOD PARAMETERS START -->
	
		<div class="description">
		<b>Parameters:</b>
			<ul>
				<code>visuOptions&nbsp;<i>&lt;Object&gt;</i>&nbsp;</code>

				 - The visu parameters {visuType: 'myType', ...args...} 
			</ul>
			
			<ul>
				<code>data&nbsp;<i>&lt;Object&gt;</i>&nbsp;</code>
				 - The input data to send to the template 
			</ul>
			
			<ul>
				<code>parentEl&nbsp;<i>&lt;HTMLElement || String&gt;</i>&nbsp;</code>

				 - optional Set the result as content of parentEl 
			</ul>
			
		</div>
		
		<!-- METHOD PARAMETERS END -->
		<!-- ADDITIONAL ATTRIBUTES START -->
		
			<div class="description">
			<b>Returns:</b>
				<ul>
					<code><i>&lt;HTMLElement || String&gt;</i>&nbsp;</code>Either the inserted HTMLElement or the String set to parentEl.innerHTML 
				</ul>

			
			</div>
		
		
			
				<!-- ADDITIONAL ATTRIBUTES  END -->
				<hr>
				</div>



<p>Templating methods are stored in the <strong>inputEx.visus</strong> object. Methods can return either a HTMLElement or a String, since inputEx.renderVisu handle both.</p>
	
<p>inputEx.visus contains 3 default methods (you can add your own) :</p>

<ul>
	<li><strong>dump</strong>: uses <a href="http://developer.yahoo.com/yui/docs/YAHOO.lang.html#method_dump">YAHOO.lang.dump</a> to generate a string from any object</li>
	<li><strong>trimpath</strong>: use <a href="http://code.google.com/p/trimpath/wiki/JavaScriptTemplates">Trimpath JST template engine</a> (requires lib/trimpath-template-v.v.v.js)</li>
	<li><strong>func</strong>: any function, useful for building interactive templates, cannot be described in json</li>
</ul>


<p>inputEx.Visus methods are functions that take 2 parameters :</p>

<ul>
	<li>options: template object passed to Object containing the "visuType" property and template specific parameters</li>
	<li>data: the data sent to the template</li>
</ul>

<br />

<h3>Examples</h3>

<p>Check the following examples to see template usage:</p>

<ul>
	<li><a href="../../examples/autocomplete.html">Autocompleter</a></li>
	<li><a href="../../examples/inplaceedit.html">InPlaceEdit</a></li>
	<li><a href="../../examples/uneditable_field.html">UneditableField</a></li>
</ul>
	
	